


export const addVerticalPicture = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addVerticalPicture', {
        model: {
            defaults: {
                name: 'addVerticalPicture',
                droppable: true,
                attributes: {
                    class:'outline',
                    speed:'30',//滚动速度30毫秒/帧
                    width:'40%',
                    height:'253px',
                    cirModel:'up'
                },
                traits: [
                    {
                        type: 'text',  
                        label: '标题',  
                        name: 'title',  
                      },  
                      {  
                        type: 'text',  
                        label: 'id',  
                        name: 'id'
                      },  
                      {
                        type: 'number',
                        label: '高',
                        changeProp:1,
                        name: 'height',
                        default: '253px',
                      },  
                      {
                        type: 'number',
                        label: '宽',
                        changeProp:1,
                        name: 'width',
                        default: '40%',
                      },
                      {
                        type: 'select', 
                        name: 'cirModel', 
                        label: '滚动模式',
                        changeProp: 1,
                        default: 'up',
                        options: [
                          { id: 'down', label: '向下滚动'},
                          { id: 'up', label: '向上滚动'},
                        ]
                      }, 
                      {
                        type: 'number',
                        name: 'speed',
                        label:'滚动速度(毫秒/帧)',
                        changeProp:1,
                        default: '30',//毫秒
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'colee'
                    },
                    components: [{
                        type: 'div',
                        attributes: {
                            class: 'colee1'
                        },
                        components: [
                            {
                                type: 'image',
                                attributes: {
                                    src: 'https://gcu-ht.gcu.edu.cn/_upload/tpl/04/bc/1212/template1212/summary.jpg'
                                },
                            },
                            {
                                type: 'image',
                                attributes: {
                                    src: 'http://seopic.699pic.com/photo/50047/8124.jpg_wh1200.jpg'
                                },
                            }
                        ],
                    },
                    {
                        type: 'div',
                        attributes: {
                            class: 'colee2'
                        },
                    },
                ],
                }],
                script() {
                    window.clearInterval(sessionStorage.getItem(this.attributes.id.value))
                    var thx = document.getElementById(this.attributes.id.value);
                    thx.style.width = `${this.attributes.width.value}%`;
                    thx.style.height = `${this.attributes.height.value}px`;
                    var speed = this.attributes.speed.value;
                    var colee2 = thx.getElementsByClassName("colee2")[0];
                    var colee1 = thx.getElementsByClassName("colee1")[0];
                    var colee = thx.getElementsByClassName("colee")[0];
                    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
                    let Marquee = null;
                    switch(this.attributes.cirModel.value){
                        case 'down':
                            Marquee = ()=>{//向下滚动
                                if(colee1.offsetTop - colee.scrollTop >= 0) {
                                    colee.scrollTop += colee2.offsetHeight; //colee跳到最顶端
                                } else {
                                    colee.scrollTop--
                                }
                            }
                            break;
                        case 'up':
                            Marquee = ()=>{//向上滚动
                                //当滚动至colee1与colee2交界时
                                if(colee2.offsetTop - colee.scrollTop <= 0) {
                                    colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
                                } else {
                                    colee.scrollTop++
                                }
                            }
                            break;
                    }
                    var MyMar = setInterval(Marquee, speed) //设置定时器
                    //鼠标移上时清除定时器达到滚动停止的目的
                    let that = this;
                    colee.onmouseover = function() { window.clearInterval(sessionStorage.getItem(that.attributes.id.value)) }
                    //鼠标移开时重设定时器
                    colee.onmouseout = function() { 
                        MyMar = setInterval(Marquee, speed) ;
                        sessionStorage.setItem(that.attributes.id.value,MyMar);
                    }
                    sessionStorage.setItem(this.attributes.id.value,MyMar);
                },
                styles: `
                .outline{width:40%;height:253px;}
                .colee{
                    border:1px solid gray;
                    overflow:hidden;width:100%;height:100%;
                }
                .colee1 img{cursor:pointer;}
                .colee img{
                    width:100%;height:100%;
                }
                .colee_bottom img{
                    width:100%;height:100%;
                }
                `,
                 },
                init() {
                    let that = this;
                    // 滚动速率
                    that.on('change:speed', function() {
                        that.get('attributes').speed = that.attributes.speed
                        // 回调script
                        that.trigger("change:script");
                    });  
                    // 宽
                    that.on('change:width', function() {
                        that.get('attributes').width = that.attributes.width
                        // 回调script
                        that.trigger("change:script");
                    }); 
                    // 高
                    that.on('change:height', function() {
                        that.get('attributes').height = that.attributes.height
                        // 回调script
                        that.trigger("change:script");
                    }); 
                    // 滚动模式
                    that.on('change:cirModel', function() {
                        that.get('attributes').cirModel = that.attributes.cirModel
                        // 回调script
                        that.trigger("change:script");
                    });
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('addVertical-picture', {
        label: '轮播图图片(垂直)',
        category: '图片类',
        content: {
            type: 'addVerticalPicture'
        },
    });
};